<!--
 * @Author: MrDotYan 2564217790@qq.com
 * @Date: 2024-09-24 09:01:41
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-24 16:42:38
 * @FilePath: /webServerAdmin/src/views/system/notice/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-box">
    <ProTable ref="proTableRef" :columns :request-api="fetchNoticeList">
      <template #tableHeader>
        <el-button type="primary" v-auth="'System.Notice.AddNotice'" @click="open">新增</el-button>
      </template>
    </ProTable>
    <Edit ref="editRef" @success="refresh"></Edit>
    <View ref="viewRef"></View>
  </div>
</template>

<script lang="tsx" setup>
import { fetchNoticeList, changeNoticeIsOff } from "@/api/modules/notice";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import Edit from "./components/edit.vue";
import View from "./components/view.vue";
import { ref } from "vue";
import { NoticeSchema } from "@/schema";
import { RefOpenEventProps } from "@/typings/interface";
import { ResultEnum } from "@/enums/httpEnum";
import { ElMessageBox, ElNotification } from "element-plus";
import { removeNotice } from "@/api/modules/notice";
import { fmt } from "@/utils/date";

const proTableRef = ref<ProTableInstance>();
const editRef = ref<RefOpenEventProps<NoticeSchema>>();
const viewRef = ref<RefOpenEventProps<NoticeSchema>>();
function viewEvent(row) {
  viewRef.value?.open(row);
}

function open() {
  editRef.value?.open();
}

function editEvent(row) {
  editRef.value?.open(row);
}

function removeEvent(row) {
  ElMessageBox.confirm("提示", { type: "error", message: "是否删除当前数据？" })
    .then(() => {
      if (row?.id) {
        removeNotice({ id: row.id }).then(r => {
          const { code, message } = r;
          if (code == ResultEnum.SUCCESS) {
            ElNotification.success("删除成功！");
            refresh();
          } else {
            ElNotification.error(message);
          }
        });
      }
    })
    .catch(err => {
      console.error(err);
    });
}

function refresh() {
  proTableRef.value?.getTableList();
}

function isNoticeOff(row) {
  changeNoticeIsOff({ id: row.id }).then(r => {
    const { code, message } = r;
    if (code === ResultEnum.SUCCESS) {
      ElNotification.success("修改成功！");
    } else {
      ElNotification.error(message);
    }
  });
}

const columns: Array<ColumnProps> = [
  { type: "index", label: "序号", fixed: "left", width: 80 },
  { label: "消息/通知名称", prop: "title", search: { el: "input" } },
  {
    label: "消息/通知内容",
    prop: "context",
    render: ({ row }) => {
      return (
        <>
          <el-button type="primary" link onClick={() => viewEvent(row)}>
            查看
          </el-button>
        </>
      );
    }
  },
  {
    label: "消息/通知是否关闭",
    prop: "isOff",
    render: ({ row }) => {
      return <el-switch v-auth="System.Notice.EditNotice" onChange={() => isNoticeOff(row)} v-model={row.isOff}></el-switch>;
    }
  },
  {
    label: "创建时间",
    prop: "createAt",
    render: ({ row }) => {
      return fmt(row.createAt, "YYYY-MM-DD HH:mm:ss");
    }
  },
  {
    label: "操作",
    prop: "action",
    render: ({ row }) => {
      return (
        <>
          <el-button type="primary" v-auth="System.Notice.EditNotice" link onClick={() => editEvent(row)}>
            编辑
          </el-button>
          <el-button type="danger" v-auth="System.Notice.RemoveNotice" link onClick={() => removeEvent(row)}>
            删除
          </el-button>
        </>
      );
    }
  }
];
</script>
